<template>
  <type-tree @update:model-value="v=> $data.current = v" :list="$data.list" ref="tree">

    <div
        style="display: flex;flex:1;flex-wrap: nowrap;flex-direction: row;align-items: stretch;margin-left: 10px;margin-top:2px;">
      <el-tabs type="border-card" v-if="$data.current && $data.current.id" :key="$data.current.id"
               style="flex:1;" @tab-change="tab_change" v-model="$data.tabName">
        <el-tab-pane :label="$data.current.name" name="info">
          <div class="card">
            <kv label="名称">
              <el-input v-model="$data.current.name" chk="*"/>
            </kv>

            <kv label="中文名称">
              <el-input v-model="$data.current.cnName" chk="*"/>
            </kv>
            <kv label="产品线">
              <product-line @change="(v,m)=>$data.current.productLine.name=m.name"
                            v-model="$data.current.productLine.code"
                            chk="*"></product-line>
            </kv>
            <kv label="应用">
              <el-input v-model="$data.current.app" chk="*"></el-input>
            </kv>


            <kv label="特性">
              <selector clearable v-model="$data.current.tableView"
                        :data="{Table:'表',View:'视图'}"></selector>
            </kv>


            <kv label="remark">
              <el-input v-model="$data.current.remark"/>
            </kv>

            <el-button>确定</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="定义" name="def">
          <api-json v-if="$data.info.id" v-model="$data.info.define" fix-object></api-json>

        </el-tab-pane>
        <el-tab-pane label="接口" name="api">Role</el-tab-pane>
        <el-tab-pane label="Task" name="task">Task</el-tab-pane>
      </el-tabs>

    </div>


  </type-tree>


</template>

<script setup>
/**
 * Created by CodeGenerator at 2024-04-15 22:12:27
 */
import productLine from "@/component/product-line.vue";
import Sortable from 'sortablejs'
import typeTree from "./type-tree.vue"
import models from "./models.vue"
import {Search, CirclePlus, Plus, Remove, EditPen} from '@element-plus/icons-vue'
import apiJson from "@/component/api-json-parameter.vue";



//定义 vue2的this,当前组件
let $self = getCurrentInstance();

//定义 $attrs
let $attrs = useAttrs()


//定义事件
let $emit = defineEmits(["update:modelValue", "loaded"]);

//定义属性
var $props = defineProps({});

//定义data
let $data = reactive({
  //默认查询条件,默认存储
  current: {productLine: {}},
  context: {},
  search: "",
  query: {},
  info: {},
  tabName: "info"
})

const tree = ref();


const tab_change = tabName => {

  if (tabName == "def") {
    jv.$http.post("/dev/data-model/detail/" + $data.current.id).then(res => {
      $data.info = res.data.data;
    });
  }
}

//
// watch(() => $data.current, v => {
//
//   var json = jv.query2Json(jv.$route.fullPath);
//   if (!v || !v.id) {
//     jv.saveToHistoryUrlQuery(top, {typeId: null});
//     delete json.typeId;
//   } else {
//
//     // jv.$http.post("/dev/data-model/detail/" + v.id).then(res=>{
//     //
//     // });
//
//     jv.saveToHistoryUrlQuery(top, {typeId: v.id})
//     json.typeId = v.id;
//   }
//
//
//   jv.saveTabs({url: json.getFullUrl()})
// }, {immediate: true, deepth: true});

</script>

<style scoped lang="scss">

.main {
  .el-tag {
    padding: 16px 12px;
    zoom: 1.1;
    cursor: default;
  }

  ::v-deep(.tail) {
    display: none;
  }
}

.stage .el-tag {
  background-color: #dbdbdb;
  color: gray !important;
  border-color: #bbbbbb;
}

.sortable-chosen {
  zoom: 1.1;
  color: blue !important;
}

</style>
